<template>
  <div class="menu">
    <div class="menu-list">
      <div class="menu-item" v-for="item in menuList" :key="item.id">
        <div class="menu-title" @click="goto(item.id, item)">
          {{ item.name }}
          <!-- <img
            class="more-img"
            v-if="item.id == '8-0'"
            src="@/assets/more.png"
          /> -->
        </div>
        <div class="dia">
          <img v-if="item.id != '2'" class="up-img" src="@/assets/up.png" />
          <div
            v-for="item1 in item.items"
            :key="item1.id"
            @click="goto(item1.id, item)"
          >
            {{ item1.name }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter();
const menuList = [
  {
    id: "8-0",
    name: "中心简介",
    items: [
      {
        id: "8",
        name: "中心介绍",
      },
      {
        id: "9",
        name: "岗位职责",
      },
      {
        id: "10",
        name: "中心大事记",
      },
    ],
  },

  {
    id: "2",
    name: "工作动态",
  },
  {
    id: "quality_1",
    name: "教学质量保障",
    items: [
      {
        id: "quality_1",
        name: "上级政策和制度",
      },
      {
        id: "quality_2",
        name: "学校制度",
      },
      {
        id: "quality_3",
        name: "教学质量报告",
      },
    ],
  },
  {
    id: "4",
    name: "评估和认证",
    items: [
      {
        id: "valuation_1",
        name: "审核评估",
      },
      {
        id: "valuation_2",
        name: "专业认证",
      },
    ],
  },
  {
    id: "5",
    name: "教学评价",
    items: [
      {
        id: "teaching_1",
        name: "主讲教师资格认定",
      },
      {
        id: "teaching_2",
        name: "教学水平评议",
      },
      {
        id: "teaching_3",
        name: "本科教学督导",
      },
    ],
  },
  {
    id: "12-0",
    name: "E学工大",
    items: [
      {
        id: "12",
        name: "智慧教学空间",
      },
      {
        id: "13",
        name: "数字学习空间",
      },
      {
        id: "14",
        name: "智能资源制作空间",
      },
    ],
  },
  {
    id: "15-0",
    name: "教学媒体技术服务",
    items: [
      {
        id: "15",
        name: "多媒体总控室介绍",
      },
      {
        id: "16",
        name: "多媒体设备使用指南",
      },
      {
        id: "17",
        name: "教学多媒体故障处理",
      },
      {
        id: "18",
        name: "标准化考场/课程视频下载",
      },
    ],
  },
  {
    id: "19-0",
    name: "视频资源服务",
    items: [
      {
        id: "19",
        name: "会议活动直播录制",
      },
      {
        id: "20",
        name: "跨校区(互动)直播",
      },
      {
        id: "23",
        name: "高清录播/微课自主录制",
      },
      {
        id: "22",
        name: "AI课程资源制作服务",
      },
    ],
  },
];
const goto = (key: string, list: any) => {
  let routeData;
  let flag =
    key == "2" ||
    key == "quality_1" ||
    key == "quality_2" ||
    key == "quality_3" ||
    key == "4" ||
    key == "valuation_1" ||
    key == "valuation_2" ||
    key == "5" ||
    key == "teaching_1" ||
    key == "teaching_2" ||
    key == "teaching_3";
  if (flag) {
    routeData = router.resolve({
      path: "/newsList",
    });
    if (
      key == "2" ||
      key == "quality_1" ||
      key == "quality_2" ||
      key == "quality_3"
    ) {
      sessionStorage.setItem(
        "newlist",
        JSON.stringify([
          { id: "quality_1", name: "上级政策和制度" },
          { id: "quality_2", name: "学校制度" },
          { id: "quality_3", name: "教学质量报告" },
        ])
      );
    } else if (key == "4" || key == "valuation_1" || key == "valuation_2") {
      sessionStorage.setItem(
        "newlist",
        JSON.stringify([
          { id: "valuation_1", name: "审核评估" },
          { id: "valuation_2", name: "专业认证" },
        ])
      );
    } else if (
      key == "5" ||
      key == "teaching_1" ||
      key == "teaching_2" ||
      key == "teaching_3"
    ) {
      sessionStorage.setItem(
        "newlist",
        JSON.stringify([
          { id: "teaching_1", name: "主讲教师资格认定" },
          { id: "teaching_2", name: "教学水平评议" },
          { id: "teaching_3", name: "本科教学督导" },
        ])
      );
    }
  } else {
    routeData = router.resolve({
      path: "/info",
    });
  }
  sessionStorage.setItem("list", JSON.stringify(list.items));
  sessionStorage.setItem("key", key);
  window.open(routeData.href, "_blank");
};
</script>
<style lang="scss" scoped>
.menu {
  width: 100%;
  height: 6.25rem;
  justify-content: center;
  padding-top: 1.25rem;
  box-sizing: border-box;
  background: linear-gradient(to bottom, #06458b, rgba(255, 255, 255, 0));
  position: absolute;
  // top: 6.25rem;

  // left: 50%;
  // transform: translateX(-50%);
  z-index: 99;
  display: flex;
  // background-image: url("@/assets/na_bg.png");
  // .menu-left {
  //   width: 22.5rem;
  // }
  .menu-list {
    width: 75rem;
    height: 2.5rem;
    // background-image: url("@/assets/menu-bg.png");
    // background-size: 100% 100%;
    margin-bottom: -0.125rem;
    // padding: 0 1.875rem;
    display: flex;
    align-items: start;
    justify-content: space-between;
    .menu-item {
      font-weight: 600;
      font-size: 1.125rem;
      color: #2a4075;
      color: #fff;
      line-height: 1.5625rem;
      position: relative;
      cursor: pointer;
      transition: 0.3s;
      z-index: 99;

      .dia {
        position: absolute;
        min-width: 12.5rem;
        left: -2.5rem;
        top: 2.5rem;
        line-height: 3rem;
        z-index: 99;
        opacity: 0;
        transition: 0.5s;
        transform: translateY(0.3rem);
        color: #06458b;
        > div {
          background-color: rgba(187, 218, 252, 0.9);
          // background-color: #0b498f;
          font-weight: 400;
          font-size: 0.9375rem;
          text-align: center;
        }
        .up-img {
          width: 0.625rem;
          height: 0.3125rem;
          position: absolute;
          left: 47%;
          margin-top: -0.3125rem;
        }
      }
      .dia > div:hover {
        transition: 0.5s;
        background-color: #a8ccf0;
        // background-color: #769ed8;
      }
    }
    .more-img {
      width: 0.625rem;
      height: 0.625rem;
      transition: 0.3s;
    }

    .menu-item:hover {
      z-index: 99;
    }
    .menu-item:hover .dia {
      opacity: 1;
      transform: translateY(0);
      z-index: 99;
    }
    .menu-item:hover .more-img {
      transform: rotate(180deg);
    }
  }
}
</style>
